<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>游戏推荐 </title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			font-size: 12px;
		}

		#listbox {
			margin: 10px;
			padding: 15px;
			border: 1px solid #CCCCCC;
			color: #0066FF;
		}

		dl {
			display: block;
			float: left;
			margin: 15px;
		}

		dd {
			font-size: 14px;
			color: #663300;
		}

		dd a {
			text-decoration: none;
			font-size: 14px;
			color: #FF3300;
		}

		dd a:hover {
			text-decoration: underline;
		}

		.clear {
			clear: both;
			height: 0px;
		}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
</head>

<body>
	<div id="listbox">
		<dl>
			<dt><img src="images/p1.jpg" /></dt>
			<dd>街机三国</dd>
			<dd><a class="del" href="javascript:void(0);">删除</a></dd>
		</dl>
		<dl>
			<dt><img src="images/p2.jpg" /></dt>
			<dd>霸域</dd>
			<dd><a class="del" href="javascript:void(0);">删除</a></dd>
		</dl>
		<dl>
			<dt><img src="images/p3.jpg" /></dt>
			<dd>斗破乾坤</dd>
			<dd><a class="del" href="javascript:void(0);">删除</a></dd>
		</dl>

		<div class="clear"></div>
		<input type="button" value="新增游戏" class="add" />
	</div>
	<script>
		$('.add').click(function () {
			// 创建新的dl列表
			// var newDl = $('<dl><dt><img src="images/p3.jpg" /></dt><dd>斗破乾坤</dd><dd><a class="del" href="javascript:void(0);">删除</a></dd></dl>');
			var newDl = $('<dl></dl>');
			var newDt = $('<dt></dt>');
			var newDd1 = $('<dd>新游戏</dd>');
			var newDd2 = $('<dd><a class="del" href="javascript:void(0);">删除</a></dd>');
			// 创建img标签， 添加到dt中，随机图片
			var arr = ['images/p1.jpg', 'images/p2.jpg', 'images/p3.jpg', 'images/p4.jpg']
			// 随机数，限制在arr的长度之内
			var random = parseInt(Math.random() * arr.length);
			var newImg = $('<img src="' + arr[random] + '" />');
			// 把图片放进dt
			newDt.append(newImg);
			// 把所有的dt dd放进dl
			newDl.append(newDt);
			newDl.append(newDd1);
			newDl.append(newDd2);
			// console.log(newDl);
			// 把dl添加到页面上：在clear的div之前插入
			// newDl.insertBefore($('.clear'));
			$('.clear').before(newDl);
			// 重新添加一次删除
			$('.del').click(function () {
				// console.log(666, $(this));
				$(this).parent().parent().remove();
			});
		});
		// 删除游戏：删除整个dl列表（图片，名字，删除按钮）
		$('.del').click(function () {
			// console.log(666, $(this));
			$(this).parent().parent().remove();
		});
		/*
			删除元素：删除本身remove();
			创建元素：$(HTML标签的字符串); 先把内容完成，再添加到页面上
			插入元素：$(A).inertBefore(B)：在A之前插入兄弟元素B
		*/
	</script>
</body>

</html>